ಸುಗಮ, ಆ್ಯಪ್-ರೀತಿಯ ವೆಬ್ ಅನುಭವಗಳನ್ನು ಅನ್‌ಲಾಕ್ ಮಾಡಿ. ಈ ಸಮಗ್ರ ಮಾರ್ಗದರ್ಶಿ ಡೈನಾಮಿಕ್ ಪೇಜ್ ಟ್ರಾನ್ಸಿಶನ್‌ಗಳನ್ನು ಸ್ಟೈಲ್ ಮಾಡಲು CSS ವ್ಯೂ ಟ್ರಾನ್ಸಿಶನ್‌ನ ಶಕ್ತಿಶಾಲಿ ಸೂಡೋ-ಎಲಿಮೆಂಟ್‌ಗಳನ್ನು ಪರಿಶೋಧಿಸುತ್ತದೆ, ಜೊತೆಗೆ ಪ್ರಾಯೋಗಿಕ ಉದಾಹರಣೆಗಳು ಮತ್ತು ಉತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ಒಳಗೊಂಡಿದೆ.
CSS ವ್ಯೂ ಟ್ರಾನ್ಸಿಶನ್‌ಗಳಲ್ಲಿ ಪಾಂಡಿತ್ಯ: ಸೂಡೋ-ಎಲಿಮೆಂಟ್ ಸ್ಟೈಲಿಂಗ್‌ನ ಆಳವಾದ ಅವಲೋಕನ
ವೆಬ್ ಡೆವಲಪ್‌ಮೆಂಟ್‌ನ ನಿರಂತರವಾಗಿ ವಿಕಸಿಸುತ್ತಿರುವ ಕ್ಷೇತ್ರದಲ್ಲಿ, ಸುಗಮ, ಸರಾಗ ಮತ್ತು ಆಕರ್ಷಕ ಬಳಕೆದಾರ ಅನುಭವದ ಹುಡುಕಾಟವು ಒಂದು ನಿರಂತರ ಪ್ರಕ್ರಿಯೆಯಾಗಿದೆ. ವರ್ಷಗಳಿಂದ, ಡೆವಲಪರ್‌ಗಳು ವೆಬ್ ಮತ್ತು ನೇಟಿವ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳ ನಡುವಿನ ಅಂತರವನ್ನು, ವಿಶೇಷವಾಗಿ ಪುಟ ಪರಿವರ್ತನೆಗಳ (page transitions) ಸುಗಮತೆಯ ವಿಷಯದಲ್ಲಿ, ಕಡಿಮೆ ಮಾಡಲು ಶ್ರಮಿಸಿದ್ದಾರೆ. ಸಾಂಪ್ರದಾಯಿಕ ವೆಬ್ ನ್ಯಾವಿಗೇಷನ್ ಸಾಮಾನ್ಯವಾಗಿ ಕಠಿಣ, ಪೂರ್ಣ-ಪುಟದ ಮರುಲೋಡ್‌ಗೆ ಕಾರಣವಾಗುತ್ತದೆ - ಇದು ಬಳಕೆದಾರರ ಗಮನವನ್ನು ಕ್ಷಣಿಕವಾಗಿ ಮುರಿಯುವ ಖಾಲಿ ಬಿಳಿ ಪರದೆಯಾಗಿದೆ. ಸಿಂಗಲ್-ಪೇಜ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳು (SPAs) ಇದನ್ನು ಕಡಿಮೆ ಮಾಡಿವೆ, ಆದರೆ ಕಸ್ಟಮ್, ಅರ್ಥಪೂರ್ಣ ಪರಿವರ್ತನೆಗಳನ್ನು ರಚಿಸುವುದು ಒಂದು ಸಂಕೀರ್ಣ ಮತ್ತು ದುರ್ಬಲ ಕಾರ್ಯವಾಗಿ ಉಳಿದಿದೆ, ಇದು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಲೈಬ್ರರಿಗಳು ಮತ್ತು ಜಟಿಲವಾದ ಸ್ಟೇಟ್ ಮ್ಯಾನೇಜ್‌ಮೆಂಟ್ ಮೇಲೆ ಹೆಚ್ಚು ಅವಲಂಬಿತವಾಗಿದೆ.
ಈಗ ಪ್ರವೇಶಿಸಿ CSS ವ್ಯೂ ಟ್ರಾನ್ಸಿಶನ್ಸ್ API, ಇದು ನಾವು ವೆಬ್‌ನಲ್ಲಿ UI ಬದಲಾವಣೆಗಳನ್ನು ನಿರ್ವಹಿಸುವ ರೀತಿಯಲ್ಲಿ ಕ್ರಾಂತಿಯನ್ನುಂಟುಮಾಡುವ ಒಂದು ಗೇಮ್-ಚೇಂಜಿಂಗ್ ತಂತ್ರಜ್ಞಾನವಾಗಿದೆ. ಈ ಶಕ್ತಿಯುತ API ವಿವಿಧ DOM ಸ್ಥಿತಿಗಳ ನಡುವೆ ಅನಿಮೇಟ್ ಮಾಡಲು ಸರಳವಾದರೂ ಅತ್ಯಂತ ಹೊಂದಿಕೊಳ್ಳುವ ಕಾರ್ಯವಿಧಾನವನ್ನು ಒದಗಿಸುತ್ತದೆ, ಇದರಿಂದಾಗಿ ಬಳಕೆದಾರರು ನಿರೀಕ್ಷಿಸುವ ಹೊಳಪಿನ, ಆ್ಯಪ್-ರೀತಿಯ ಅನುಭವಗಳನ್ನು ರಚಿಸುವುದು ಹಿಂದೆಂದಿಗಿಂತಲೂ ಸುಲಭವಾಗುತ್ತದೆ. ಈ APIಯ ಶಕ್ತಿಯ ಹೃದಯಭಾಗದಲ್ಲಿ ಹೊಸ CSS ಸೂಡೋ-ಎಲಿಮೆಂಟ್‌ಗಳ ಒಂದು ಸೆಟ್ ಇದೆ. ಇವು ನಿಮ್ಮ ಸಾಮಾನ್ಯ ಸೆಲೆಕ್ಟರ್‌ಗಳಲ್ಲ; ಇವು ಬ್ರೌಸರ್‌ನಿಂದ ಉತ್ಪತ್ತಿಯಾಗುವ ಡೈನಾಮಿಕ್, ತಾತ್ಕಾಲಿಕ ಎಲಿಮೆಂಟ್‌ಗಳಾಗಿದ್ದು, ಪರಿವರ್ತನೆಯ ಪ್ರತಿಯೊಂದು ಹಂತದ ಮೇಲೆ ನಿಮಗೆ ವಿವರವಾದ ನಿಯಂತ್ರಣವನ್ನು ನೀಡುತ್ತವೆ. ಈ ಮಾರ್ಗದರ್ಶಿಯು ಈ ಸೂಡೋ-ಎಲಿಮೆಂಟ್ ಟ್ರೀಯ ಆಳವಾದ ಅವಲೋಕನವನ್ನು ನಿಮಗೆ ನೀಡುತ್ತದೆ, ಜಾಗತಿಕ ಪ್ರೇಕ್ಷಕರಿಗಾಗಿ ಬೆರಗುಗೊಳಿಸುವ, ಕಾರ್ಯಕ್ಷಮತೆ ಉತ್ತಮವಾಗಿರುವ ಮತ್ತು ಸುಲಭವಾಗಿ ಪ್ರವೇಶಿಸಬಹುದಾದ ಅನಿಮೇಷನ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಲು ಪ್ರತಿಯೊಂದು ಘಟಕವನ್ನು ಹೇಗೆ ಸ್ಟೈಲ್ ಮಾಡುವುದು ಎಂಬುದನ್ನು ಪರಿಶೋಧಿಸುತ್ತದೆ.
ವ್ಯೂ ಟ್ರಾನ್ಸಿಶನ್‌ನ ರಚನೆ
ನಾವು ಒಂದು ಟ್ರಾನ್ಸಿಶನ್‌ಗೆ ಶೈಲಿ ನೀಡುವ ಮೊದಲು, ಅದು ಪ್ರಚೋದನೆಗೊಂಡಾಗ ತೆರೆಮರೆಯಲ್ಲಿ ಏನಾಗುತ್ತದೆ ಎಂಬುದನ್ನು ನಾವು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಬೇಕು. ನೀವು ಒಂದು ವ್ಯೂ ಟ್ರಾನ್ಸಿಶನ್ ಅನ್ನು ಪ್ರಾರಂಭಿಸಿದಾಗ (ಉದಾಹರಣೆಗೆ, document.startViewTransition() ಎಂದು ಕರೆಯುವ ಮೂಲಕ), ಬ್ರೌಸರ್ ಈ ಕೆಳಗಿನ ಹಂತಗಳ ಸರಣಿಯನ್ನು ನಿರ್ವಹಿಸುತ್ತದೆ:
- ಹಳೆಯ ಸ್ಥಿತಿಯನ್ನು ಸೆರೆಹಿಡಿಯುವುದು: ಬ್ರೌಸರ್ ಪ್ರಸ್ತುತ ಪುಟದ ಸ್ಥಿತಿಯ "ಸ್ಕ್ರೀನ್‌ಶಾಟ್" ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ.
- DOM ಅನ್ನು ಅಪ್‌ಡೇಟ್ ಮಾಡುವುದು: ನಂತರ ನಿಮ್ಮ ಕೋಡ್ DOM ಗೆ ತನ್ನ ಬದಲಾವಣೆಗಳನ್ನು ಮಾಡುತ್ತದೆ (ಉದಾಹರಣೆಗೆ, ಹೊಸ ವ್ಯೂಗೆ ನ್ಯಾವಿಗೇಟ್ ಮಾಡುವುದು, ಎಲಿಮೆಂಟ್‌ಗಳನ್ನು ಸೇರಿಸುವುದು ಅಥವಾ ತೆಗೆದುಹಾಕುವುದು).
- ಹೊಸ ಸ್ಥಿತಿಯನ್ನು ಸೆರೆಹಿಡಿಯುವುದು: DOM ಅಪ್‌ಡೇಟ್ ಪೂರ್ಣಗೊಂಡ ನಂತರ, ಬ್ರೌಸರ್ ಹೊಸ ಸ್ಥಿತಿಯ ಸ್ಕ್ರೀನ್‌ಶಾಟ್ ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ.
- ಸೂಡೋ-ಎಲಿಮೆಂಟ್ ಟ್ರೀಯನ್ನು ನಿರ್ಮಿಸುವುದು: ನಂತರ ಬ್ರೌಸರ್ ಪುಟದ ಓವರ್‌ಲೇಯಲ್ಲಿ ಸೂಡೋ-ಎಲಿಮೆಂಟ್‌ಗಳ ತಾತ್ಕಾಲಿಕ ಟ್ರೀಯನ್ನು ನಿರ್ಮಿಸುತ್ತದೆ. ಈ ಟ್ರೀಯು ಹಳೆಯ ಮತ್ತು ಹೊಸ ಸ್ಥಿತಿಗಳ ಸೆರೆಹಿಡಿದ ಚಿತ್ರಗಳನ್ನು ಹೊಂದಿರುತ್ತದೆ.
- ಅನಿಮೇಟ್ ಮಾಡುವುದು: ಈ ಸೂಡೋ-ಎಲಿಮೆಂಟ್‌ಗಳಿಗೆ CSS ಅನಿಮೇಷನ್‌ಗಳನ್ನು ಅನ್ವಯಿಸಲಾಗುತ್ತದೆ, ಇದು ಹಳೆಯ ಸ್ಥಿತಿಯಿಂದ ಹೊಸ ಸ್ಥಿತಿಗೆ ಸುಗಮ ಪರಿವರ್ತನೆಯನ್ನು ಸೃಷ್ಟಿಸುತ್ತದೆ. ಡೀಫಾಲ್ಟ್ ಆಗಿ ಇದು ಸರಳ ಕ್ರಾಸ್-ಫೇಡ್ ಆಗಿರುತ್ತದೆ.
- ಸ್ವಚ್ಛಗೊಳಿಸುವುದು: ಅನಿಮೇಷನ್‌ಗಳು ಪೂರ್ಣಗೊಂಡ ನಂತರ, ಸೂಡೋ-ಎಲಿಮೆಂಟ್ ಟ್ರೀಯನ್ನು ತೆಗೆದುಹಾಕಲಾಗುತ್ತದೆ, ಮತ್ತು ಬಳಕೆದಾರರು ಹೊಸ, ಲೈವ್ DOM ನೊಂದಿಗೆ ಸಂವಹನ ನಡೆಸಬಹುದು.
ಕಸ್ಟಮೈಸೇಶನ್‌ನ ಪ್ರಮುಖ ಅಂಶವೆಂದರೆ ಈ ತಾತ್ಕಾಲಿಕ ಸೂಡೋ-ಎಲಿಮೆಂಟ್ ಟ್ರೀ. ಇದನ್ನು ನಿಮ್ಮ ಪುಟದ ಮೇಲೆ ತಾತ್ಕಾಲಿಕವಾಗಿ ಇರಿಸಲಾದ ಡಿಸೈನ್ ಟೂಲ್‌ನಲ್ಲಿರುವ ಲೇಯರ್‌ಗಳ ಒಂದು ಸೆಟ್ ಎಂದು ಯೋಚಿಸಿ. ಈ ಲೇಯರ್‌ಗಳ ಮೇಲೆ ನಿಮಗೆ ಸಂಪೂರ್ಣ CSS ನಿಯಂತ್ರಣವಿರುತ್ತದೆ. ನೀವು ಕೆಲಸ ಮಾಡುವ ರಚನೆ ಇಲ್ಲಿದೆ:
- ::view-transition
- ::view-transition-group(*)
- ::view-transition-image-pair(*)
- ::view-transition-old(*)
- ::view-transition-new(*)
- ::view-transition-image-pair(*)
- ::view-transition-group(*)
ಈ ಪ್ರತಿಯೊಂದು ಸೂಡೋ-ಎಲಿಮೆಂಟ್‌ಗಳು ಏನನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತವೆ ಎಂಬುದನ್ನು ಈಗ ವಿಭಜಿಸೋಣ.
ಸೂಡೋ-ಎಲಿಮೆಂಟ್ ಪಾತ್ರಗಳು
::view-transition: ಇದು ಸಂಪೂರ್ಣ ರಚನೆಯ ಮೂಲವಾಗಿದೆ. ಇದು ವ್ಯೂಪೋರ್ಟ್ ಅನ್ನು ತುಂಬುವ ಮತ್ತು ಪುಟದ ಇತರ ಎಲ್ಲಾ ವಿಷಯಗಳ ಮೇಲೆ ಇರುವ ಒಂದೇ ಒಂದು ಎಲಿಮೆಂಟ್ ಆಗಿದೆ. ಇದು ಎಲ್ಲಾ ಟ್ರಾನ್ಸಿಶನಿಂಗ್ ಗುಂಪುಗಳಿಗೆ ಕಂಟೇನರ್ ಆಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ ಮತ್ತು ಅವಧಿ ಅಥವಾ ಟೈಮಿಂಗ್ ಫಂಕ್ಷನ್‌ನಂತಹ ಒಟ್ಟಾರೆ ಟ್ರಾನ್ಸಿಶನ್ ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ಹೊಂದಿಸಲು ಇದು ಉತ್ತಮ ಸ್ಥಳವಾಗಿದೆ.
::view-transition-group(*): ಪ್ರತಿಯೊಂದು ವಿಭಿನ್ನ ಟ್ರಾನ್ಸಿಶನಿಂಗ್ ಎಲಿಮೆಂಟ್‌ಗೆ (view-transition-name CSS ಪ್ರಾಪರ್ಟಿಯಿಂದ ಗುರುತಿಸಲ್ಪಟ್ಟ) ಒಂದು ಗುಂಪನ್ನು ರಚಿಸಲಾಗುತ್ತದೆ. ಈ ಸೂಡೋ-ಎಲಿಮೆಂಟ್ ತನ್ನ ವಿಷಯದ ಸ್ಥಾನ ಮತ್ತು ಗಾತ್ರವನ್ನು ಅನಿಮೇಟ್ ಮಾಡಲು ಜವಾಬ್ದಾರವಾಗಿರುತ್ತದೆ. ನೀವು ಪರದೆಯ ಒಂದು ಬದಿಯಿಂದ ಇನ್ನೊಂದು ಬದಿಗೆ ಚಲಿಸುವ ಕಾರ್ಡ್ ಹೊಂದಿದ್ದರೆ, ವಾಸ್ತವವಾಗಿ ಚಲಿಸುತ್ತಿರುವುದು ::view-transition-group ಆಗಿದೆ.
::view-transition-image-pair(*): ಗುಂಪಿನೊಳಗೆ ನೆಸ್ಟ್ ಮಾಡಲಾದ ಈ ಎಲಿಮೆಂಟ್, ಹಳೆಯ ಮತ್ತು ಹೊಸ ವೀಕ್ಷಣೆಗಳಿಗೆ ಕಂಟೇನರ್ ಮತ್ತು ಕ್ಲಿಪ್ಪಿಂಗ್ ಮಾಸ್ಕ್ ಆಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ. ಇದರ ಪ್ರಾಥಮಿಕ ಪಾತ್ರವೆಂದರೆ ಅನಿಮೇಷನ್ ಸಮಯದಲ್ಲಿ border-radius ಅಥವಾ transform ನಂತಹ ಪರಿಣಾಮಗಳನ್ನು ನಿರ್ವಹಿಸುವುದು ಮತ್ತು ಡೀಫಾಲ್ಟ್ ಕ್ರಾಸ್-ಫೇಡ್ ಅನಿಮೇಷನ್ ಅನ್ನು ನಿಭಾಯಿಸುವುದು.
::view-transition-old(*): ಇದು ಎಲಿಮೆಂಟ್‌ನ ಹಳೆಯ ಸ್ಥಿತಿಯಲ್ಲಿನ (DOM ಬದಲಾವಣೆಯ ಮೊದಲು) "ಸ್ಕ್ರೀನ್‌ಶಾಟ್" ಅಥವಾ ರೆಂಡರ್ ಮಾಡಲಾದ ವೀಕ್ಷಣೆಯನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತದೆ. ಡೀಫಾಲ್ಟ್ ಆಗಿ, ಇದು opacity: 1 ನಿಂದ opacity: 0 ಗೆ ಅನಿಮೇಟ್ ಆಗುತ್ತದೆ.
::view-transition-new(*): ಇದು ಎಲಿಮೆಂಟ್‌ನ ಹೊಸ ಸ್ಥಿತಿಯಲ್ಲಿನ (DOM ಬದಲಾವಣೆಯ ನಂತರ) "ಸ್ಕ್ರೀನ್‌ಶಾಟ್" ಅಥವಾ ರೆಂಡರ್ ಮಾಡಲಾದ ವೀಕ್ಷಣೆಯನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತದೆ. ಡೀಫಾಲ್ಟ್ ಆಗಿ, ಇದು opacity: 0 ನಿಂದ opacity: 1 ಗೆ ಅನಿಮೇಟ್ ಆಗುತ್ತದೆ.
ರೂಟ್: ::view-transition ಸೂಡೋ-ಎಲಿಮೆಂಟ್ ಅನ್ನು ಸ್ಟೈಲಿಂಗ್ ಮಾಡುವುದು
::view-transition ಸೂಡೋ-ಎಲಿಮೆಂಟ್ ನಿಮ್ಮ ಸಂಪೂರ್ಣ ಅನಿಮೇಷನ್ ಅನ್ನು ಚಿತ್ರಿಸುವ ಕ್ಯಾನ್ವಾಸ್ ಆಗಿದೆ. ಇದು ಟಾಪ್-ಲೆವೆಲ್ ಕಂಟೇನರ್ ಆಗಿರುವುದರಿಂದ, ಟ್ರಾನ್ಸಿಶನ್‌ಗೆ ಜಾಗತಿಕವಾಗಿ ಅನ್ವಯಿಸಬೇಕಾದ ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು ಇದು ಸೂಕ್ತ ಸ್ಥಳವಾಗಿದೆ. ಡೀಫಾಲ್ಟ್ ಆಗಿ, ಬ್ರೌಸರ್ ಅನಿಮೇಷನ್‌ಗಳ ಒಂದು ಸೆಟ್ ಅನ್ನು ಒದಗಿಸುತ್ತದೆ, ಆದರೆ ನೀವು ಅವುಗಳನ್ನು ಸುಲಭವಾಗಿ ಓವರ್‌ರೈಡ್ ಮಾಡಬಹುದು.
ಉದಾಹರಣೆಗೆ, ಡೀಫಾಲ್ಟ್ ಟ್ರಾನ್ಸಿಶನ್ 250 ಮಿಲಿಸೆಕೆಂಡುಗಳ ಕಾಲ ಇರುವ ಕ್ರಾಸ್-ಫೇಡ್ ಆಗಿದೆ. ನಿಮ್ಮ ಸೈಟ್‌ನಲ್ಲಿನ ಪ್ರತಿಯೊಂದು ಟ್ರಾನ್ಸಿಶನ್‌ಗೆ ಇದನ್ನು ಬದಲಾಯಿಸಲು ನೀವು ಬಯಸಿದರೆ, ನೀವು ರೂಟ್ ಸೂಡೋ-ಎಲಿಮೆಂಟ್ ಅನ್ನು ಟಾರ್ಗೆಟ್ ಮಾಡಬಹುದು:
::view-transition {
animation-duration: 500ms;
animation-timing-function: ease-in-out;
}
ಈ ಸರಳ ನಿಯಮವು ಈಗ ಎಲ್ಲಾ ಡೀಫಾಲ್ಟ್ ಪುಟ ಫೇಡ್‌ಗಳು ಎರಡು ಪಟ್ಟು ಹೆಚ್ಚು ಸಮಯ ತೆಗೆದುಕೊಳ್ಳುವಂತೆ ಮಾಡುತ್ತದೆ ಮತ್ತು 'ease-in-out' ಕರ್ವ್ ಅನ್ನು ಬಳಸುತ್ತದೆ, ಇದು ಅವುಗಳಿಗೆ ಸ್ವಲ್ಪ ವಿಭಿನ್ನ ಅನುಭವವನ್ನು ನೀಡುತ್ತದೆ. ನೀವು ಇಲ್ಲಿ ಸಂಕೀರ್ಣ ಅನಿಮೇಷನ್‌ಗಳನ್ನು ಅನ್ವಯಿಸಬಹುದಾದರೂ, ಇದನ್ನು ಸಾಮಾನ್ಯವಾಗಿ ಸಾರ್ವತ್ರಿಕ ಟೈಮಿಂಗ್ ಮತ್ತು ಈಸಿಂಗ್ ಅನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು ಉತ್ತಮವಾಗಿ ಬಳಸಲಾಗುತ್ತದೆ, ಹೆಚ್ಚು ನಿರ್ದಿಷ್ಟವಾದ ಸೂಡೋ-ಎಲಿಮೆಂಟ್‌ಗಳು ವಿವರವಾದ ಕೊರಿಯೋಗ್ರಫಿಯನ್ನು ನಿಭಾಯಿಸಲು ಅವಕಾಶ ನೀಡುತ್ತದೆ.
ಗುಂಪು ಮಾಡುವುದು ಮತ್ತು ಹೆಸರಿಸುವುದು: `view-transition-name` ನ ಶಕ್ತಿ
ಯಾವುದೇ ಹೆಚ್ಚುವರಿ ಕೆಲಸವಿಲ್ಲದೆ, ವ್ಯೂ ಟ್ರಾನ್ಸಿಶನ್ API ಸಂಪೂರ್ಣ ಪುಟಕ್ಕೆ ಕ್ರಾಸ್-ಫೇಡ್ ಅನ್ನು ಒದಗಿಸುತ್ತದೆ. ಇದನ್ನು ರೂಟ್‌ಗಾಗಿ ಒಂದೇ ಸೂಡೋ-ಎಲಿಮೆಂಟ್ ಗುಂಪಿನಿಂದ ನಿರ್ವಹಿಸಲಾಗುತ್ತದೆ. ಈ APIಯ ನಿಜವಾದ ಶಕ್ತಿಯು ನೀವು ನಿರ್ದಿಷ್ಟ, ಪ್ರತ್ಯೇಕ ಎಲಿಮೆಂಟ್‌ಗಳನ್ನು ಸ್ಥಿತಿಗಳ ನಡುವೆ ಟ್ರಾನ್ಸಿಶನ್ ಮಾಡಲು ಬಯಸಿದಾಗ ಅನಾವರಣಗೊಳ್ಳುತ್ತದೆ. ಉದಾಹರಣೆಗೆ, ಪಟ್ಟಿ ಪುಟದಲ್ಲಿನ ಉತ್ಪನ್ನದ ಥಂಬ್‌ನೇಲ್ ಅನ್ನು ವಿವರ ಪುಟದಲ್ಲಿನ ಮುಖ್ಯ ಉತ್ಪನ್ನ ಚಿತ್ರದ ಸ್ಥಾನಕ್ಕೆ ಮನಬಂದಂತೆ ಬೆಳೆಯುವಂತೆ ಮತ್ತು ಚಲಿಸುವಂತೆ ಮಾಡುವುದು.
ವಿಭಿನ್ನ DOM ಸ್ಥಿತಿಗಳಲ್ಲಿನ ಎರಡು ಎಲಿಮೆಂಟ್‌ಗಳು ಪರಿಕಲ್ಪನಾತ್ಮಕವಾಗಿ ಒಂದೇ ಎಂದು ಬ್ರೌಸರ್‌ಗೆ ತಿಳಿಸಲು, ನೀವು view-transition-name CSS ಪ್ರಾಪರ್ಟಿಯನ್ನು ಬಳಸುತ್ತೀರಿ. ಈ ಪ್ರಾಪರ್ಟಿಯನ್ನು ಪ್ರಾರಂಭದ ಎಲಿಮೆಂಟ್ ಮತ್ತು ಅಂತ್ಯದ ಎಲಿಮೆಂಟ್ ಎರಡಕ್ಕೂ ಅನ್ವಯಿಸಬೇಕು.
/* ಪಟ್ಟಿ ಪುಟದ CSS ನಲ್ಲಿ */
.product-thumbnail {
view-transition-name: product-image;
}
/* ವಿವರ ಪುಟದ CSS ನಲ್ಲಿ */
.main-product-image {
view-transition-name: product-image;
}
ಎರಡೂ ಎಲಿಮೆಂಟ್‌ಗಳಿಗೆ ಒಂದೇ ಅನನ್ಯ ಹೆಸರನ್ನು ('product-image' ಈ ಸಂದರ್ಭದಲ್ಲಿ) ನೀಡುವ ಮೂಲಕ, ನೀವು ಬ್ರೌಸರ್‌ಗೆ ಸೂಚಿಸುತ್ತಿದ್ದೀರಿ: "ಹಳೆಯ ಪುಟವನ್ನು ಫೇಡ್ ಔಟ್ ಮಾಡಿ ಹೊಸ ಪುಟವನ್ನು ಫೇಡ್ ಇನ್ ಮಾಡುವ ಬದಲು, ಈ ನಿರ್ದಿಷ್ಟ ಎಲಿಮೆಂಟ್‌ಗಾಗಿ ವಿಶೇಷ ಟ್ರಾನ್ಸಿಶನ್ ಅನ್ನು ರಚಿಸಿ." ಬ್ರೌಸರ್ ಈಗ ರೂಟ್ ಫೇಡ್‌ನಿಂದ ಪ್ರತ್ಯೇಕವಾಗಿ ಅದರ ಅನಿಮೇಷನ್ ಅನ್ನು ನಿರ್ವಹಿಸಲು ಮೀಸಲಾದ ::view-transition-group(product-image) ಅನ್ನು ರಚಿಸುತ್ತದೆ. ಜನಪ್ರಿಯ "ಮಾರ್ಫಿಂಗ್" ಅಥವಾ "ಹಂಚಿಕೊಂಡ ಎಲಿಮೆಂಟ್" ಟ್ರಾನ್ಸಿಶನ್ ಪರಿಣಾಮವನ್ನು ಸಕ್ರಿಯಗೊಳಿಸುವ ಮೂಲಭೂತ ಪರಿಕಲ್ಪನೆ ಇದಾಗಿದೆ.
ಪ್ರಮುಖ ಸೂಚನೆ: ಟ್ರಾನ್ಸಿಶನ್ ಸಮಯದಲ್ಲಿ ಯಾವುದೇ ನಿರ್ದಿಷ್ಟ ಕ್ಷಣದಲ್ಲಿ, ಒಂದು view-transition-name ಅನನ್ಯವಾಗಿರಬೇಕು. ಒಂದೇ ಸಮಯದಲ್ಲಿ ಒಂದೇ ಹೆಸರಿನ ಎರಡು ಗೋಚರ ಎಲಿಮೆಂಟ್‌ಗಳನ್ನು ನೀವು ಹೊಂದಿರಲು ಸಾಧ್ಯವಿಲ್ಲ.
ಆಳವಾದ ಸ್ಟೈಲಿಂಗ್: ಕೋರ್ ಸೂಡೋ-ಎಲಿಮೆಂಟ್‌ಗಳು
ನಮ್ಮ ಎಲಿಮೆಂಟ್‌ಗಳಿಗೆ ಹೆಸರಿಸಿದ ನಂತರ, ಬ್ರೌಸರ್ ಅವರಿಗಾಗಿ ಉತ್ಪಾದಿಸುವ ನಿರ್ದಿಷ್ಟ ಸೂಡೋ-ಎಲಿಮೆಂಟ್‌ಗಳನ್ನು ಸ್ಟೈಲಿಂಗ್ ಮಾಡಲು ನಾವು ಈಗ ಆಳವಾಗಿ ಧುಮುಕಬಹುದು. ಇಲ್ಲಿ ನೀವು ನಿಜವಾಗಿಯೂ ಕಸ್ಟಮ್ ಮತ್ತು ಅಭಿವ್ಯಕ್ತಿಶೀಲ ಅನಿಮೇಷನ್‌ಗಳನ್ನು ರಚಿಸಬಹುದು.
`::view-transition-group(name)`: ಚಲಿಸುವವನು
ಗುಂಪಿನ ಏಕೈಕ ಜವಾಬ್ದಾರಿಯೆಂದರೆ ಹಳೆಯ ಎಲಿಮೆಂಟ್‌ನ ಗಾತ್ರ ಮತ್ತು ಸ್ಥಾನದಿಂದ ಹೊಸ ಎಲಿಮೆಂಟ್‌ನ ಗಾತ್ರ ಮತ್ತು ಸ್ಥಾನಕ್ಕೆ ಟ್ರಾನ್ಸಿಶನ್ ಮಾಡುವುದು. ಇದು ನಿಜವಾದ ವಿಷಯದ ನೋಟವನ್ನು ಹೊಂದಿರುವುದಿಲ್ಲ, ಕೇವಲ ಅದರ ಬೌಂಡಿಂಗ್ ಬಾಕ್ಸ್ ಅನ್ನು ಮಾತ್ರ ಹೊಂದಿರುತ್ತದೆ. ಇದನ್ನು ಚಲಿಸುವ ಫ್ರೇಮ್ ಎಂದು ಯೋಚಿಸಿ.
ಡೀಫಾಲ್ಟ್ ಆಗಿ, ಬ್ರೌಸರ್ ಅದರ transform ಮತ್ತು width/height ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ಅನಿಮೇಟ್ ಮಾಡುತ್ತದೆ. ವಿಭಿನ್ನ ಪರಿಣಾಮಗಳನ್ನು ರಚಿಸಲು ನೀವು ಇದನ್ನು ಓವರ್‌ರೈಡ್ ಮಾಡಬಹುದು. ಉದಾಹರಣೆಗೆ, ನೀವು ಅದರ ಚಲನೆಗೆ ವಕ್ರ ಪಥದಲ್ಲಿ ಅನಿಮೇಟ್ ಮಾಡುವ ಮೂಲಕ ಒಂದು ಆರ್ಕ್ ಅನ್ನು ಸೇರಿಸಬಹುದು, ಅಥವಾ ಅದರ ಪ್ರಯಾಣದ ಸಮಯದಲ್ಲಿ ಅದನ್ನು ಸ್ಕೇಲ್ ಅಪ್ ಮತ್ತು ಡೌನ್ ಮಾಡಬಹುದು.
::view-transition-group(product-image) {
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ನಾವು ಉತ್ಪನ್ನ ಚಿತ್ರದ ಚಲನೆಗೆ ಮಾತ್ರ ನಿರ್ದಿಷ್ಟ ಈಸಿಂಗ್ ಫಂಕ್ಷನ್ ಅನ್ನು ಅನ್ವಯಿಸುತ್ತಿದ್ದೇವೆ, ಇದು ಪುಟದ ಉಳಿದ ಭಾಗದ ಡೀಫಾಲ್ಟ್ ಫೇಡ್‌ಗೆ ಪರಿಣಾಮ ಬೀರದಂತೆ, ಅದನ್ನು ಹೆಚ್ಚು ಡೈನಾಮಿಕ್ ಮತ್ತು ಭೌತಿಕವಾಗಿ ಅನುಭವಿಸುವಂತೆ ಮಾಡುತ್ತದೆ.
`::view-transition-image-pair(name)`: ಕ್ಲಿಪ್ಪರ್ ಮತ್ತು ಫೇಡರ್
ಚಲಿಸುವ ಗುಂಪಿನೊಳಗೆ ನೆಸ್ಟ್ ಮಾಡಲಾದ, ಇಮೇಜ್-ಪೇರ್ ಹಳೆಯ ಮತ್ತು ಹೊಸ ವೀಕ್ಷಣೆಗಳನ್ನು ಹೊಂದಿರುತ್ತದೆ. ಇದು ಕ್ಲಿಪ್ಪಿಂಗ್ ಮಾಸ್ಕ್ ಆಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ, ಆದ್ದರಿಂದ ನಿಮ್ಮ ಎಲಿಮೆಂಟ್ border-radius ಹೊಂದಿದ್ದರೆ, ಇಮೇಜ್-ಪೇರ್ ಗಾತ್ರ ಮತ್ತು ಸ್ಥಾನದ ಅನಿಮೇಷನ್ ಉದ್ದಕ್ಕೂ ವಿಷಯವು ಆ ತ್ರಿಜ್ಯದೊಂದಿಗೆ ಕ್ಲಿಪ್ ಆಗಿ ಉಳಿಯುವುದನ್ನು ಖಚಿತಪಡಿಸುತ್ತದೆ. ಇದರ ಇನ್ನೊಂದು ಮುಖ್ಯ ಕೆಲಸವೆಂದರೆ ಹಳೆಯ ಮತ್ತು ಹೊಸ ವಿಷಯದ ನಡುವೆ ಡೀಫಾಲ್ಟ್ ಕ್ರಾಸ್-ಫೇಡ್ ಅನ್ನು ಸಂಯೋಜಿಸುವುದು.
ದೃಶ್ಯ ಸ್ಥಿರತೆಯನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಅಥವಾ ಹೆಚ್ಚು ಸುಧಾರಿತ ಪರಿಣಾಮಗಳನ್ನು ರಚಿಸಲು ನೀವು ಈ ಎಲಿಮೆಂಟ್ ಅನ್ನು ಸ್ಟೈಲ್ ಮಾಡಲು ಬಯಸಬಹುದು. ಪರಿಗಣಿಸಬೇಕಾದ ಪ್ರಮುಖ ಪ್ರಾಪರ್ಟಿ isolation: isolate. ನೀವು ಮಕ್ಕಳ (ಹಳೆಯ ಮತ್ತು ಹೊಸ) ಮೇಲೆ ಸುಧಾರಿತ mix-blend-mode ಪರಿಣಾಮಗಳನ್ನು ಬಳಸಲು ಯೋಜಿಸಿದರೆ ಇದು ನಿರ್ಣಾಯಕವಾಗಿದೆ, ಏಕೆಂದರೆ ಇದು ಹೊಸ ಸ್ಟ್ಯಾಕಿಂಗ್ ಸಂದರ್ಭವನ್ನು ಸೃಷ್ಟಿಸುತ್ತದೆ ಮತ್ತು ಬ್ಲೆಂಡಿಂಗ್ ಟ್ರಾನ್ಸಿಶನ್ ಗುಂಪಿನ ಹೊರಗಿನ ಎಲಿಮೆಂಟ್‌ಗಳ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರುವುದನ್ನು ತಡೆಯುತ್ತದೆ.
::view-transition-image-pair(product-image) {
isolation: isolate;
}
`::view-transition-old(name)` ಮತ್ತು `::view-transition-new(name)`: ಕಾರ್ಯಕ್ರಮದ ತಾರೆಯರು
ಇವು DOM ಬದಲಾವಣೆಯ ಮೊದಲು ಮತ್ತು ನಂತರ ನಿಮ್ಮ ಎಲಿಮೆಂಟ್‌ನ ದೃಶ್ಯ ನೋಟವನ್ನು ಪ್ರತಿನಿಧಿಸುವ ಸೂಡೋ-ಎಲಿಮೆಂಟ್‌ಗಳಾಗಿವೆ. ನಿಮ್ಮ ಹೆಚ್ಚಿನ ಕಸ್ಟಮ್ ಅನಿಮೇಷನ್ ಕೆಲಸ ಇಲ್ಲಿಯೇ ನಡೆಯುತ್ತದೆ. ಡೀಫಾಲ್ಟ್ ಆಗಿ, ಬ್ರೌಸರ್ opacity ಮತ್ತು mix-blend-mode ಬಳಸಿ ಅವುಗಳ ಮೇಲೆ ಸರಳ ಕ್ರಾಸ್-ಫೇಡ್ ಅನಿಮೇಷನ್ ಅನ್ನು ನಡೆಸುತ್ತದೆ. ಕಸ್ಟಮ್ ಅನಿಮೇಷನ್ ರಚಿಸಲು, ನೀವು ಮೊದಲು ಡೀಫಾಲ್ಟ್ ಒಂದನ್ನು ಆಫ್ ಮಾಡಬೇಕು.
::view-transition-old(name),
::view-transition-new(name) {
animation: none;
}
ಡೀಫಾಲ್ಟ್ ಅನಿಮೇಷನ್ ಅನ್ನು ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಿದ ನಂತರ, ನಿಮ್ಮದೇ ಆದದನ್ನು ಅನ್ವಯಿಸಲು ನೀವು ಸ್ವತಂತ್ರರು. ಕೆಲವು ಸಾಮಾನ್ಯ ಮಾದರಿಗಳನ್ನು ಅನ್ವೇಷಿಸೋಣ.
ಕಸ್ಟಮ್ ಅನಿಮೇಷನ್: ಸ್ಲೈಡ್
ಕ್ರಾಸ್-ಫೇಡ್ ಬದಲಿಗೆ, ಕಂಟೇನರ್‌ನ ವಿಷಯವನ್ನು ಸ್ಲೈಡ್ ಇನ್ ಮಾಡುವಂತೆ ಮಾಡೋಣ. ಉದಾಹರಣೆಗೆ, ಲೇಖನಗಳ ನಡುವೆ ನ್ಯಾವಿಗೇಟ್ ಮಾಡುವಾಗ, ಹೊಸ ಲೇಖನದ ಪಠ್ಯವು ಬಲದಿಂದ ಸ್ಲೈಡ್ ಇನ್ ಆಗಬೇಕು ಮತ್ತು ಹಳೆಯ ಪಠ್ಯವು ಎಡಕ್ಕೆ ಸ್ಲೈಡ್ ಔಟ್ ಆಗಬೇಕು ಎಂದು ನಾವು ಬಯಸುತ್ತೇವೆ.
ಮೊದಲು, ಕೀಫ್ರೇಮ್‌ಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಿ:
@keyframes slide-from-right {
from { transform: translateX(100%); }
to { transform: translateX(0); }
}
@keyframes slide-to-left {
from { transform: translateX(0); }
to { transform: translateX(-100%); }
}
ಈಗ, ಈ ಅನಿಮೇಷನ್‌ಗಳನ್ನು ಹೆಸರಿಸಲಾದ 'article-content' ಎಲಿಮೆಂಟ್‌ಗಾಗಿ ಹಳೆಯ ಮತ್ತು ಹೊಸ ಸೂಡೋ-ಎಲಿಮೆಂಟ್‌ಗಳಿಗೆ ಅನ್ವಯಿಸಿ.
::view-transition-old(article-content) {
animation: 300ms ease-out forwards slide-to-left;
}
::view-transition-new(article-content) {
animation: 300ms ease-out forwards slide-from-right;
}
ಕಸ್ಟಮ್ ಅನಿಮೇಷನ್: 3D ಫ್ಲಿಪ್
ಹೆಚ್ಚು ನಾಟಕೀಯ ಪರಿಣಾಮಕ್ಕಾಗಿ, ನೀವು 3D ಕಾರ್ಡ್ ಫ್ಲಿಪ್ ಅನ್ನು ರಚಿಸಬಹುದು. ಇದಕ್ಕೆ transform ಪ್ರಾಪರ್ಟಿಯನ್ನು rotateY ನೊಂದಿಗೆ ಅನಿಮೇಟ್ ಮಾಡುವುದು ಮತ್ತು backface-visibility ಅನ್ನು ಸಹ ನಿರ್ವಹಿಸುವುದು ಅಗತ್ಯವಿದೆ.
/* ಗುಂಪಿಗೆ 3D ಸಂದರ್ಭದ ಅಗತ್ಯವಿದೆ */
::view-transition-group(card-flipper) {
transform-style: preserve-3d;
}
/* ಇಮೇಜ್-ಪೇರ್‌ಗೆ ಕೂಡ 3D ಸಂದರ್ಭವನ್ನು ಸಂರಕ್ಷಿಸುವ ಅಗತ್ಯವಿದೆ */
::view-transition-image-pair(card-flipper) {
transform-style: preserve-3d;
}
/* ಹಳೆಯ ವೀಕ್ಷಣೆಯು 0 ರಿಂದ -180 ಡಿಗ್ರಿಗಳಿಗೆ ಫ್ಲಿಪ್ ಆಗುತ್ತದೆ */
::view-transition-old(card-flipper) {
animation: 600ms ease-in forwards flip-out;
backface-visibility: hidden;
}
/* ಹೊಸ ವೀಕ್ಷಣೆಯು 180 ರಿಂದ 0 ಡಿಗ್ರಿಗಳಿಗೆ ಫ್ಲಿಪ್ ಆಗುತ್ತದೆ */
::view-transition-new(card-flipper) {
animation: 600ms ease-out forwards flip-in;
backface-visibility: hidden;
}
@keyframes flip-out {
from { transform: rotateY(0deg); }
to { transform: rotateY(-180deg); }
}
@keyframes flip-in {
from { transform: rotateY(180deg); }
to { transform: rotateY(0deg); }
}
ಪ್ರಾಯೋಗಿಕ ಉದಾಹರಣೆಗಳು ಮತ್ತು ಸುಧಾರಿತ ತಂತ್ರಗಳು
ಸಿದ್ಧಾಂತವು ಉಪಯುಕ್ತವಾಗಿದೆ, ಆದರೆ ಪ್ರಾಯೋಗಿಕ ಅನ್ವಯದಿಂದ ನಾವು ನಿಜವಾಗಿಯೂ ಕಲಿಯುತ್ತೇವೆ. ಕೆಲವು ಸಾಮಾನ್ಯ ಸನ್ನಿವೇಶಗಳನ್ನು ಮತ್ತು ವ್ಯೂ ಟ್ರಾನ್ಸಿಶನ್ ಸೂಡೋ-ಎಲಿಮೆಂಟ್‌ಗಳೊಂದಿಗೆ ಅವುಗಳನ್ನು ಹೇಗೆ ಪರಿಹರಿಸುವುದು ಎಂಬುದನ್ನು ನೋಡೋಣ.
ಉದಾಹರಣೆ: "ಮಾರ್ಫಿಂಗ್" ಕಾರ್ಡ್ ಥಂಬ್‌ನೇಲ್
ಇದು ಕ್ಲಾಸಿಕ್ ಶೇರ್ಡ್ ಎಲಿಮೆಂಟ್ ಟ್ರಾನ್ಸಿಶನ್. ಬಳಕೆದಾರ ಪ್ರೊಫೈಲ್‌ಗಳ ಗ್ಯಾಲರಿಯನ್ನು ಕಲ್ಪಿಸಿಕೊಳ್ಳಿ. ಪ್ರತಿಯೊಂದು ಪ್ರೊಫೈಲ್ ಅವತಾರವಿರುವ ಒಂದು ಕಾರ್ಡ್ ಆಗಿದೆ. ನೀವು ಕಾರ್ಡ್ ಮೇಲೆ ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ, ನೀವು ವಿವರ ಪುಟಕ್ಕೆ ನ್ಯಾವಿಗೇಟ್ ಆಗುತ್ತೀರಿ, ಅಲ್ಲಿ ಅದೇ ಅವತಾರವನ್ನು ಮೇಲ್ಭಾಗದಲ್ಲಿ ಪ್ರಮುಖವಾಗಿ ಪ್ರದರ್ಶಿಸಲಾಗುತ್ತದೆ.
ಹಂತ 1: ಹೆಸರುಗಳನ್ನು ನೀಡಿ
ನಿಮ್ಮ ಗ್ಯಾಲರಿ ಪುಟದಲ್ಲಿ, ಅವತಾರ ಚಿತ್ರಕ್ಕೆ ಒಂದು ಹೆಸರನ್ನು ನೀಡಲಾಗುತ್ತದೆ. ಈ ಹೆಸರು ಪ್ರತಿಯೊಂದು ಕಾರ್ಡ್‌ಗೆ ಅನನ್ಯವಾಗಿರಬೇಕು, ಉದಾಹರಣೆಗೆ, ಬಳಕೆದಾರರ IDಯನ್ನು ಆಧರಿಸಿ.
/* gallery-item.css ನಲ್ಲಿ */
.card-avatar { view-transition-name: avatar-user-123; }
ಪ್ರೊಫೈಲ್ ವಿವರ ಪುಟದಲ್ಲಿ, ದೊಡ್ಡ ಹೆಡರ್ ಅವತಾರಕ್ಕೆ ಅದೇ ಹೆಸರನ್ನು ನೀಡಲಾಗುತ್ತದೆ.
/* profile-page.css ನಲ್ಲಿ */
.profile-header-avatar { view-transition-name: avatar-user-123; }
ಹಂತ 2: ಅನಿಮೇಷನ್ ಅನ್ನು ಕಸ್ಟಮೈಸ್ ಮಾಡಿ
ಡೀಫಾಲ್ಟ್ ಆಗಿ, ಬ್ರೌಸರ್ ಅವತಾರವನ್ನು ಚಲಿಸುತ್ತದೆ ಮತ್ತು ಸ್ಕೇಲ್ ಮಾಡುತ್ತದೆ, ಆದರೆ ಇದು ವಿಷಯವನ್ನು ಕ್ರಾಸ್-ಫೇಡ್ ಕೂಡ ಮಾಡುತ್ತದೆ. ಚಿತ್ರವು ಒಂದೇ ಆಗಿದ್ದರೆ, ಈ ಫೇಡ್ ಅನಗತ್ಯ ಮತ್ತು ಸ್ವಲ್ಪ ಮಿನುಗುವಿಕೆಗೆ ಕಾರಣವಾಗಬಹುದು. ನಾವು ಅದನ್ನು ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಬಹುದು.
/* ಇಲ್ಲಿರುವ ನಕ್ಷತ್ರ (*) ಯಾವುದೇ ಹೆಸರಿಸಲಾದ ಗುಂಪಿಗೆ ವೈಲ್ಡ್‌ಕಾರ್ಡ್ ಆಗಿದೆ */
::view-transition-image-pair(*) {
/* ಡೀಫಾಲ್ಟ್ ಫೇಡ್ ಅನ್ನು ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಿ */
animation-duration: 0s;
}
ಒಂದು ನಿಮಿಷ, ನಾವು ಫೇಡ್ ಅನ್ನು ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಿದರೆ, ವಿಷಯವು ಹೇಗೆ ಬದಲಾಗುತ್ತದೆ? ಹಳೆಯ ಮತ್ತು ಹೊಸ ವೀಕ್ಷಣೆಗಳು ಒಂದೇ ಆಗಿರುವ ಹಂಚಿಕೊಂಡ ಎಲಿಮೆಂಟ್‌ಗಳಿಗಾಗಿ, ಬ್ರೌಸರ್ ಸಂಪೂರ್ಣ ಟ್ರಾನ್ಸಿಶನ್‌ಗೆ ಕೇವಲ ಒಂದು ವೀಕ್ಷಣೆಯನ್ನು ಬಳಸುವಷ್ಟು ಸ್ಮಾರ್ಟ್ ಆಗಿದೆ. `image-pair` ಮೂಲಭೂತವಾಗಿ ಒಂದೇ ಚಿತ್ರವನ್ನು ಹೊಂದಿರುತ್ತದೆ, ಆದ್ದರಿಂದ ಫೇಡ್ ಅನ್ನು ನಿಷ್ಕ್ರಿಯಗೊಳಿಸುವುದು ಈ ಆಪ್ಟಿಮೈಸೇಶನ್ ಅನ್ನು ಬಹಿರಂಗಪಡಿಸುತ್ತದೆ. ವಿಷಯವು ನಿಜವಾಗಿಯೂ ಬದಲಾಗುವ ಎಲಿಮೆಂಟ್‌ಗಳಿಗಾಗಿ, ಡೀಫಾಲ್ಟ್ ಫೇಡ್‌ನ ಬದಲಿಗೆ ನಿಮಗೆ ಕಸ್ಟಮ್ ಅನಿಮೇಷನ್ ಬೇಕಾಗುತ್ತದೆ.
ಆಕಾರ ಅನುಪಾತದ ಬದಲಾವಣೆಗಳನ್ನು ನಿಭಾಯಿಸುವುದು
ಟ್ರಾನ್ಸಿಶನಿಂಗ್ ಎಲಿಮೆಂಟ್ ತನ್ನ ಆಕಾರ ಅನುಪಾತವನ್ನು ಬದಲಾಯಿಸಿದಾಗ ಒಂದು ಸಾಮಾನ್ಯ ಸವಾಲು ಉದ್ಭವಿಸುತ್ತದೆ. ಉದಾಹರಣೆಗೆ, ಪಟ್ಟಿ ಪುಟದಲ್ಲಿನ 16:9 ಲ್ಯಾಂಡ್‌ಸ್ಕೇಪ್ ಥಂಬ್‌ನೇಲ್ ವಿವರ ಪುಟದಲ್ಲಿ 1:1 ಚೌಕದ ಅವತಾರಕ್ಕೆ ಟ್ರಾನ್ಸಿಶನ್ ಆಗಬಹುದು. ಬ್ರೌಸರ್‌ನ ಡೀಫಾಲ್ಟ್ ವರ್ತನೆಯು ಅಗಲ ಮತ್ತು ಎತ್ತರವನ್ನು ಸ್ವತಂತ್ರವಾಗಿ ಅನಿಮೇಟ್ ಮಾಡುವುದಾಗಿದೆ, ಇದು ಟ್ರಾನ್ಸಿಶನ್ ಸಮಯದಲ್ಲಿ ಚಿತ್ರವು ಚಪ್ಪಟೆಯಾಗಿ ಅಥವಾ ಹಿಗ್ಗಿದಂತೆ ಕಾಣಲು ಕಾರಣವಾಗುತ್ತದೆ.
ಪರಿಹಾರವು ಸೊಗಸಾಗಿದೆ. ನಾವು ::view-transition-group ಗೆ ಗಾತ್ರ ಮತ್ತು ಸ್ಥಾನದ ಬದಲಾವಣೆಯನ್ನು ನಿಭಾಯಿಸಲು ಅವಕಾಶ ನೀಡುತ್ತೇವೆ, ಆದರೆ ಅದರೊಳಗಿನ ಹಳೆಯ ಮತ್ತು ಹೊಸ ಚಿತ್ರಗಳ ಸ್ಟೈಲಿಂಗ್ ಅನ್ನು ನಾವು ಓವರ್‌ರೈಡ್ ಮಾಡುತ್ತೇವೆ.
ಗುರಿಯೆಂದರೆ ಹಳೆಯ ಮತ್ತು ಹೊಸ "ಸ್ಕ್ರೀನ್‌ಶಾಟ್‌ಗಳು" ತಮ್ಮ ಕಂಟೇನರ್ ಅನ್ನು ವಿರೂಪಗೊಳಿಸದೆ ತುಂಬುವಂತೆ ಮಾಡುವುದು. ನಾವು ಇದನ್ನು ಅವುಗಳ ಅಗಲ ಮತ್ತು ಎತ್ತರವನ್ನು 100% ಗೆ ಹೊಂದಿಸುವ ಮೂಲಕ ಮತ್ತು ಬ್ರೌಸರ್‌ನ ಡೀಫಾಲ್ಟ್ object-fit ಪ್ರಾಪರ್ಟಿಗೆ (ಇದು ಮೂಲ ಎಲಿಮೆಂಟ್‌ನಿಂದ ಆನುವಂಶಿಕವಾಗಿ ಬಂದಿದೆ) ಸ್ಕೇಲಿಂಗ್ ಅನ್ನು ಸರಿಯಾಗಿ ನಿಭಾಯಿಸಲು ಅವಕಾಶ ನೀಡುವ ಮೂಲಕ ಮಾಡಬಹುದು.
::view-transition-old(hero-image),
::view-transition-new(hero-image) {
/* ವಿರೂಪವನ್ನು ತಡೆಯಲು ಕಂಟೇನರ್ ಅನ್ನು ತುಂಬುವುದು */
width: 100%;
height: 100%;
/* ಪರಿಣಾಮವನ್ನು ಸ್ಪಷ್ಟವಾಗಿ ನೋಡಲು ಡೀಫಾಲ್ಟ್ ಕ್ರಾಸ್-ಫೇಡ್ ಅನ್ನು ಓವರ್‌ರೈಡ್ ಮಾಡಿ */
animation: none;
}
ಈ CSS ನೊಂದಿಗೆ, `image-pair` ತನ್ನ ಆಕಾರ ಅನುಪಾತವನ್ನು ಸುಗಮವಾಗಿ ಅನಿಮೇಟ್ ಮಾಡುತ್ತದೆ, ಮತ್ತು ಒಳಗಿನ ಚಿತ್ರಗಳು ಸರಿಯಾಗಿ ಕ್ರಾಪ್ ಅಥವಾ ಲೆಟರ್‌ಬಾಕ್ಸ್ ಆಗುತ್ತವೆ (ಅವುಗಳ `object-fit` ಮೌಲ್ಯವನ್ನು ಅವಲಂಬಿಸಿ), ಸಾಮಾನ್ಯ ಕಂಟೇನರ್‌ನಲ್ಲಿರುವಂತೆಯೇ. ನಂತರ ನೀವು ಈ ಸರಿಪಡಿಸಿದ ಜ್ಯಾಮಿತಿಯ ಮೇಲೆ ನಿಮ್ಮದೇ ಆದ ಕಸ್ಟಮ್ ಅನಿಮೇಷನ್‌ಗಳನ್ನು, ಉದಾಹರಣೆಗೆ ಕ್ರಾಸ್-ಫೇಡ್ ಅನ್ನು, ಸೇರಿಸಬಹುದು.
ಡಿಬಗ್ಗಿಂಗ್ ಮತ್ತು ಬ್ರೌಸರ್ ಬೆಂಬಲ
ಕೇವಲ ಒಂದು ಸೆಕೆಂಡಿನ ಭಾಗಕ್ಕೆ ಮಾತ್ರ ಅಸ್ತಿತ್ವದಲ್ಲಿರುವ ಎಲಿಮೆಂಟ್‌ಗಳನ್ನು ಸ್ಟೈಲಿಂಗ್ ಮಾಡುವುದು ಕಷ್ಟಕರವಾಗಿರುತ್ತದೆ. ಅದೃಷ್ಟವಶಾತ್, ಆಧುನಿಕ ಬ್ರೌಸರ್‌ಗಳು ಇದಕ್ಕಾಗಿ ಅತ್ಯುತ್ತಮ ಡೆವಲಪರ್ ಟೂಲ್‌ಗಳನ್ನು ಒದಗಿಸುತ್ತವೆ. Chrome ಅಥವಾ Edge DevTools ನಲ್ಲಿ, ನೀವು "Animations" ಪ್ಯಾನೆಲ್‌ಗೆ ಹೋಗಬಹುದು, ಮತ್ತು ನೀವು ವ್ಯೂ ಟ್ರಾನ್ಸಿಶನ್ ಅನ್ನು ಪ್ರಚೋದಿಸಿದಾಗ, ನೀವು ಅದನ್ನು ವಿರಾಮಗೊಳಿಸಬಹುದು. ಅನಿಮೇಷನ್ ವಿರಾಮಗೊಂಡಾಗ, ನೀವು "Elements" ಪ್ಯಾನೆಲ್ ಬಳಸಿ ಸಂಪೂರ್ಣ `::view-transition` ಸೂಡೋ-ಎಲಿಮೆಂಟ್ ಟ್ರೀಯನ್ನು DOM ನ ಯಾವುದೇ ಭಾಗದಂತೆ ಪರಿಶೀಲಿಸಬಹುದು. ಅನ್ವಯಿಸಲಾದ ಶೈಲಿಗಳನ್ನು ನೀವು ನೋಡಬಹುದು ಮತ್ತು ನಿಮ್ಮ ಅನಿಮೇಷನ್‌ಗಳನ್ನು ಪರಿಪೂರ್ಣಗೊಳಿಸಲು ಅವುಗಳನ್ನು ನೈಜ ಸಮಯದಲ್ಲಿ ಮಾರ್ಪಡಿಸಬಹುದು.
2023 ರ ಕೊನೆಯಲ್ಲಿ, ವ್ಯೂ ಟ್ರಾನ್ಸಿಶನ್ಸ್ APIಯು ಕ್ರೋಮಿಯಂ-ಆಧಾರಿತ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ (Chrome, Edge, Opera) ಬೆಂಬಲಿತವಾಗಿದೆ. Firefox ಮತ್ತು Safari ಗಾಗಿ ಅನುಷ್ಠಾನಗಳು ಪ್ರಗತಿಯಲ್ಲಿವೆ. ಇದು ಪ್ರಗತಿಪರ ವರ್ಧನೆ (progressive enhancement) ಗೆ ಸೂಕ್ತವಾದ ಅಭ್ಯರ್ಥಿಯನ್ನಾಗಿ ಮಾಡುತ್ತದೆ. ಬೆಂಬಲಿತ ಬ್ರೌಸರ್‌ಗಳಿರುವ ಬಳಕೆದಾರರು ಸಂತೋಷಕರ, ವರ್ಧಿತ ಅನುಭವವನ್ನು ಪಡೆಯುತ್ತಾರೆ, ಆದರೆ ಇತರ ಬ್ರೌಸರ್‌ಗಳ ಬಳಕೆದಾರರು ಪ್ರಮಾಣಿತ, ತಕ್ಷಣದ ನ್ಯಾವಿಗೇಷನ್ ಪಡೆಯುತ್ತಾರೆ. ನೀವು CSS ನಲ್ಲಿ ಬೆಂಬಲವನ್ನು ಪರಿಶೀಲಿಸಬಹುದು:
@supports (view-transition: none) {
/* ಎಲ್ಲಾ ವ್ಯೂ-ಟ್ರಾನ್ಸಿಶನ್ ಶೈಲಿಗಳು ಇಲ್ಲಿ ಬರುತ್ತವೆ */
::view-transition-old(my-element) { ... }
}
ಜಾಗತಿಕ ಪ್ರೇಕ್ಷಕರಿಗಾಗಿ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು
ಅನಿಮೇಷನ್‌ಗಳನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸುವಾಗ, ವಿಶ್ವಾದ್ಯಂತದ ವೈವಿಧ್ಯಮಯ ಬಳಕೆದಾರರು ಮತ್ತು ಸಾಧನಗಳನ್ನು ಪರಿಗಣಿಸುವುದು ಅತ್ಯಗತ್ಯ.
ಕಾರ್ಯಕ್ಷಮತೆ: ಅನಿಮೇಷನ್‌ಗಳು ವೇಗವಾಗಿ ಮತ್ತು ಸುಗಮವಾಗಿರಬೇಕು. ಬ್ರೌಸರ್‌ಗೆ ಪ್ರಕ್ರಿಯೆಗೊಳಿಸಲು ಸುಲಭವಾದ CSS ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ಅನಿಮೇಟ್ ಮಾಡಲು ಅಂಟಿಕೊಳ್ಳಿ, ಮುಖ್ಯವಾಗಿ transform ಮತ್ತು opacity. width, height, ಅಥವಾ margin ನಂತಹ ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ಅನಿಮೇಟ್ ಮಾಡುವುದು ಪ್ರತಿ ಫ್ರೇಮ್‌ನಲ್ಲಿ ಲೇಔಟ್ ಮರುಲೆಕ್ಕಾಚಾರಗಳನ್ನು ಪ್ರಚೋದಿಸಬಹುದು, ಇದು ವಿಶೇಷವಾಗಿ ಕಡಿಮೆ-ಶಕ್ತಿಯ ಸಾಧನಗಳಲ್ಲಿ ತೊದಲುವಿಕೆ ಮತ್ತು ಕಳಪೆ ಅನುಭವಕ್ಕೆ ಕಾರಣವಾಗುತ್ತದೆ.
ಪ್ರವೇಶಿಸುವಿಕೆ (Accessibility): ಕೆಲವು ಬಳಕೆದಾರರು ಅನಿಮೇಷನ್‌ಗಳಿಂದ ಚಲನೆಯ ಕಾಯಿಲೆ ಅಥವಾ ಅಸ್ವಸ್ಥತೆಯನ್ನು ಅನುಭವಿಸುತ್ತಾರೆ. ಎಲ್ಲಾ ಪ್ರಮುಖ ಆಪರೇಟಿಂಗ್ ಸಿಸ್ಟಮ್‌ಗಳು ಚಲನೆಯನ್ನು ಕಡಿಮೆ ಮಾಡಲು ಬಳಕೆದಾರರ ಆದ್ಯತೆಯನ್ನು ಒದಗಿಸುತ್ತವೆ. ನಾವು ಇದನ್ನು ಗೌರವಿಸಬೇಕು. prefers-reduced-motion ಮೀಡಿಯಾ ಕ್ವೆರಿಯು ಈ ಬಳಕೆದಾರರಿಗಾಗಿ ನಿಮ್ಮ ಅನಿಮೇಷನ್‌ಗಳನ್ನು ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಲು ಅಥವಾ ಸರಳಗೊಳಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ.
@media (prefers-reduced-motion: reduce) {
::view-transition-group(*),
::view-transition-old(*),
::view-transition-new(*) {
/* ಎಲ್ಲಾ ಕಸ್ಟಮ್ ಅನಿಮೇಷನ್‌ಗಳನ್ನು ಬಿಟ್ಟುಬಿಡಿ ಮತ್ತು ತ್ವರಿತ, ಸರಳ ಫೇಡ್ ಬಳಸಿ */
animation: none !important;
}
}
ಬಳಕೆದಾರ ಅನುಭವ (UX): ಉತ್ತಮ ಟ್ರಾನ್ಸಿಶನ್‌ಗಳು ಉದ್ದೇಶಪೂರ್ವಕವಾಗಿರುತ್ತವೆ. ಅವು ಬಳಕೆದಾರರ ಗಮನವನ್ನು ಮಾರ್ಗದರ್ಶಿಸಬೇಕು ಮತ್ತು UI ನಲ್ಲಿ ಆಗುತ್ತಿರುವ ಬದಲಾವಣೆಯ ಬಗ್ಗೆ ಸಂದರ್ಭವನ್ನು ಒದಗಿಸಬೇಕು. ತುಂಬಾ ನಿಧಾನವಾದ ಅನಿಮೇಷನ್ ಒಂದು ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ನಿಧಾನಗತಿಯಲ್ಲಿರುವಂತೆ ಭಾಸವಾಗುವಂತೆ ಮಾಡಬಹುದು, ಆದರೆ ತುಂಬಾ flashy ಆದದ್ದು ಗಮನವನ್ನು ಬೇರೆಡೆಗೆ ಸೆಳೆಯಬಹುದು. 200ms ಮತ್ತು 500ms ನಡುವಿನ ಟ್ರಾನ್ಸಿಶನ್ ಅವಧಿಗಳನ್ನು ಗುರಿಯಾಗಿರಿಸಿ. ಅನಿಮೇಷನ್ ಅನ್ನು ನೋಡುವುದಕ್ಕಿಂತ ಹೆಚ್ಚಾಗಿ ಅನುಭವಿಸಬೇಕು ಎಂಬುದು ಗುರಿಯಾಗಿದೆ.
ತೀರ್ಮಾನ: ಭವಿಷ್ಯವು ಸುಗಮವಾಗಿದೆ
CSS ವ್ಯೂ ಟ್ರಾನ್ಸಿಶನ್ಸ್ API, ಮತ್ತು ವಿಶೇಷವಾಗಿ ಅದರ ಶಕ್ತಿಯುತ ಸೂಡೋ-ಎಲಿಮೆಂಟ್ ಟ್ರೀ, ವೆಬ್ ಬಳಕೆದಾರ ಇಂಟರ್ಫೇಸ್‌ಗಳಿಗಾಗಿ ಒಂದು ಮಹತ್ವದ ಮುನ್ನಡೆಯನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತದೆ. ಇದು ಡೆವಲಪರ್‌ಗಳಿಗೆ ನೇಟಿವ್, ಕಾರ್ಯಕ್ಷಮತೆಯುಳ್ಳ ಮತ್ತು ಹೆಚ್ಚು ಕಸ್ಟಮೈಸ್ ಮಾಡಬಹುದಾದ ಟೂಲ್‌ಸೆಟ್ ಅನ್ನು ಒದಗಿಸುತ್ತದೆ, ಇದು ಒಮ್ಮೆ ನೇಟಿವ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳ ಏಕಸ್ವಾಮ್ಯವಾಗಿದ್ದ ಸುಗಮ, ಸ್ಥಿತಿಯುತ ಟ್ರಾನ್ಸಿಶನ್‌ಗಳನ್ನು ರಚಿಸಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ. ::view-transition, ::view-transition-group, ಮತ್ತು old/new ಇಮೇಜ್ ಜೋಡಿಗಳ ಪಾತ್ರಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವ ಮೂಲಕ, ನೀವು ಸರಳ ಫೇಡ್‌ಗಳನ್ನು ಮೀರಿ, ಉಪಯುಕ್ತತೆಯನ್ನು ಹೆಚ್ಚಿಸುವ ಮತ್ತು ಬಳಕೆದಾರರನ್ನು ಸಂತೋಷಪಡಿಸುವ ಸಂಕೀರ್ಣ, ಅರ್ಥಪೂರ್ಣ ಅನಿಮೇಷನ್‌ಗಳನ್ನು ಸಂಯೋಜಿಸಬಹುದು.
ಬ್ರೌಸರ್ ಬೆಂಬಲ ವಿಸ್ತರಿಸಿದಂತೆ, ಈ API ಆಧುನಿಕ ಫ್ರಂಟ್-ಎಂಡ್ ಡೆವಲಪರ್‌ನ ಟೂಲ್‌ಕಿಟ್‌ನ ಅತ್ಯಗತ್ಯ ಭಾಗವಾಗಲಿದೆ. ಅದರ ಸಾಮರ್ಥ್ಯಗಳನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳುವ ಮೂಲಕ ಮತ್ತು ಕಾರ್ಯಕ್ಷಮತೆ ಮತ್ತು ಪ್ರವೇಶಿಸುವಿಕೆಗಾಗಿ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳಿಗೆ ಬದ್ಧರಾಗಿರುವ ಮೂಲಕ, ನಾವು ಕೇವಲ ಹೆಚ್ಚು ಕ್ರಿಯಾತ್ಮಕವಲ್ಲದೆ, ಎಲ್ಲೆಡೆ, ಎಲ್ಲರಿಗೂ ಹೆಚ್ಚು ಸುಂದರ ಮತ್ತು ಅರ್ಥಗರ್ಭಿತವಾದ ವೆಬ್ ಅನ್ನು ನಿರ್ಮಿಸಬಹುದು.